<template>
    <span>
        <el-upload class="media-upload"
                   v-if="!formData.originFileName"
                   drag
                   multiple
                   action="/api/file/upload?purpose=media&ownerId=0"
                   :show-file-list="false"
                   :on-success="mediaUploadSuccess">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处, </div>
            <div class="el-upload__text">或
                <em>点击上传</em>
            </div>
        </el-upload>
        <div v-else-if="formData.originFileName && formData.fileUrl">
            <div style="font-weight:900;color:var(--global-color)">
                {{formData.originFileName}}<br>
                {{formData.fileUrl}}
                <span v-if="mediaType === 'audio' && audioStatus == 0">加载中 ...</span>
            </div>
            <div v-if="mediaType === 'image'">
                <img :src="`/api${formData.fileUrl}`"
                     width="150" />
            </div>
            <div v-else-if="mediaType === 'video'">
                <video width="250"
                       height="200"
                       preload="auto"
                       controls="controls">
                    <source :src="`/api${formData.fileUrl}`" />
                </video>
            </div>
            <div v-else-if="mediaType === 'audio'">
                <audio id="mediaUploadAudio"
                       preload="auto"
                       controls
                       :src="`/api${formData.fileUrl}`" />
            </div>
        </div>
    </span>
</template>

<script>
    import Vue from 'vue'
    export default {
        name: 'mediaUpload',
        props: ['data', 'mediaType', 'prop', 'uploadSuccess'],
        data() {
            return {
                audioStatus: 0,
                audioElement: null,
                formItem: this.prop,
                formData: this.data ? this.data : {}
            }
        },
        mounted() {
            console.log('mediaUpload', this.formItem)
            if (this.mediaType === 'audio') {
                this.audioElement = document.getElementById('mediaUploadAudio')
                this.audioElement &&
                    this.audioElement.addEventListener('progress', this.mediaAudioProgress)
            }
        },
        beforeDestroy() {
            if (this.mediaType === 'audio' && this.audioElement) {
                this.audioElement.removeEventListener('progress', this.mediaAudioProgress)
            }
        },
        methods: {
            mediaUploadSuccess(res) {
                console.log('mediaUploadSuccess', res)
                this.formData = res
                this.uploadSuccess && this.uploadSuccess(this.formData)
            },
            mediaAudioProgress(event) {
                const audio = event.path[0]
                if (audio && audio.localName === 'audio') {
                    const buffered = audio.buffered
                    const total = audio.duration
                    if (buffered.length > 0) {
                        var end = buffered.end(0)
                        Vue.set(this, 'audioStatus', Math.round(end / total * 100))
                    }
                    if (this.audioStatus > 0 && this.audioElement) {
                        this.audioElement.removeEventListener('progress', this.mediaAudioProgress)
                    }
                    console.log('mediaAudioProgress', event, buffered.length, this.audioStatus)
                }
            }
        }
    }
</script>

<style lang="less">
.media-upload {
    width: calc(100% - 10px);
    .el-upload {
        width: 100%;
    }
    .el-upload-dragger {
        width: 100%;
    }
}
</style>
